﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <title>WebRTC Screen Sharing ® Muaz Khan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link rel="author" type="text/html" href="https://plus.google.com/100325991024054712503">
        <meta name="author" content="Muaz Khan">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css" />
        <script>
            var hash = window.location.hash.replace('#', '');
            if (!hash.length) location.href = location.href + '#screen-id-' + ((Math.random() * new Date().getTime()).toString(36).toLowerCase().replace( /\./g , '-'));
        </script>
        <style>
            html { background: #eee; }

            body {
                font-family: "Inconsolata", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
                font-size: 1.2em;
                line-height: 1.2em;
                margin: 0;
            }

            body {
                background: #fff;
                border: 1px solid;
                border-color: #ddd #aaa #aaa #ddd;
                border-radius: 5px;
                margin: .5em auto 0 auto;
                padding: .8em;
                padding-top: 0;
            }

            h1, h2 {
                border-bottom: 1px solid black;
                display: inline;
                font-weight: normal;
                line-height: 36px;
                padding: 0 0 3px 0;
            }

            h1 {
                background: rgb(238, 238, 238);
                border-bottom-width: 2px;
                display: block;
                margin-top: 0;
                padding: .3em;
                text-align: center;
            }

            :-moz-any-link:focus {
                border: 0;
                color: #000;
            }

            ::selection { background: #ccc; }

            ::-moz-selection { background: #ccc; }

            button {
                -moz-border-radius: 3px;
                -moz-transition: none;
                -webkit-transition: none;
                background: #0370ea;
                background: -moz-linear-gradient(top, #008dfd 0, #0370ea 100%);
                background: -webkit-linear-gradient(top, #008dfd 0, #0370ea 100%);
                border: 1px solid #076bd2;
                border-radius: 3px;
                color: #fff;
                display: inline-block;
                font-family: inherit;
                font-size: .8em;
                line-height: 1.3;
                padding: 5px 12px;
                text-align: center;
                text-shadow: 1px 1px 1px #076bd2;
            }

            button:hover { background: rgb(9, 147, 240); }

            button:active { background: rgb(10, 118, 190); }

            button[disabled] {
                background: none;
                border: 1px solid rgb(187, 181, 181);
                color: gray;
                text-shadow: none;
            }

            #remote-media-streams video { width: 10em; }

            #local-media-stream video { width: 34em; }

            footer { text-align: center; }

            code {
                color: rgb(204, 14, 14);
                font-family: inherit;
            }

            video {
                vertical-align: bottom;
                width: 90%;
            }

            pre {
                border-left: 2px solid red;
                margin-left: 2em;
                padding-left: 1em;
            }
        </style>
        <script src="https://facebook-widget-generator.googlecode.com/svn/screen/firebase.js"> </script>
        <script src="https://facebook-widget-generator.googlecode.com/svn/screen/screen.js"> </script>
    </head>
    <body>
        <h1>
            WebRTC Screen Sharing / <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/Pluginfree-Screen-Sharing"
                                       target="_blank">Source Code</a>
        </h1>
        <p>
            <span>Copyright © 2013</span> <a href="https://github.com/muaz-khan" target="_blank">
                                              Muaz Khan</a><span>&lt;</span><a href="http://twitter.com/muazkh" target="_blank">@muazkh</a><span>&gt;.</span>
        </p>
        <section class="plusone-gplus">
            <div class="g-plusone" data-href="https://www.webrtc-experiment.com/"></div>
        </section>
        <section>
            <h2>Share Your Screen:</h2>

            <button id="share-screen">Share Screen</button>
        </section>
        <table style="border-left: 1px solid black; width: 100%;">
            <tr>
                <td>
                    <h2 style="display: block; text-align: center;">
                        Screens Preview</h2>
                    <section id="screens-preview"></section>
                </td>
            </tr>
        </table>
        <script>
            var screen = new Screen();

            var screensPreview = document.getElementById('screens-preview');

            // on getting each new screen
            screen.onaddstream = function(e) {
                var button = document.createElement('button');
                button.innerHTML = 'Stop Sharing Screen';
                button.onclick = function() {
                    screen.leave();
                    this.disabled = true;
                };
                screensPreview.appendChild(button);
                screensPreview.appendChild(document.createElement('hr'));
                screensPreview.appendChild(e.video);
                e.video.focus();
            };

            // using firebase for signaling
            screen.firebase = 'signaling';

            // if someone leaves; just remove his screen
            screen.onuserleft = function(userid) {
                var video = document.getElementById(userid);
                if (video && video.parentNode) video.parentNode.innerHTML = '';
            };

            // check pre-shared screens
            screen.check();

            document.getElementById('share-screen').onclick = function() {
                screen.share();
                this.disabled = true;

                this.parentNode.innerHTML = '<h2><a href="' + location.href + '" target="_blank">Share this link</a></h2>';
            };
        </script>
        <br />
        <br />
        <h2>
            Enable screen capture support in getUserMedia()</h2>
        <p>
            Allow web pages to request access to the screen contents via the getUserMedia()
            API. #enable-usermedia-screen-capture
        </p>
        <p>
            You must enable this flag via "chrome://flags"</p>
        <br />
        <br />
        <pre>
&lt;script src="https://github.com/dvideby0/screenshare/blob/master/app.js"&gt;&lt;/script&gt;
</pre>
        <pre>
var screen = new Screen('screen-unique-id');

// get shared screens
screen.onaddstream = function(e) {
    document.body.appendChild(e.video);
};

// custom signaling channel
// you can use each and every signaling channel
// any websocket, socket.io, or XHR implementation
// any SIP server
// anything! etc.
screen.openSignalingChannel = function(callback) {
    return io.connect().on('message', callback);
};

// check pre-shared screens
// it is useful to auto-view
// or search pre-shared screens
screen.check();

document.getElementById('share-screen').onclick = function() {
    screen.share('screen name');
};

// to stop sharing screen
screen.leave();
</pre>
        <br />
        <br />
        <h2>
            To use code in your own site, you must understand following limitations:
        </h2>
        <p>
            Chrome Canary denies "screen capturing" request automatically if:</p>
        <ol>
            <li>You've not used 'chromeMediaSource' constraint:
                <pre>
mandatory: {chromeMediaSource: 'screen'}
</pre>
            </li>
            <li>You requested audio-stream alongwith 'chromeMediaSource' – it is not permitted in
                a "single" getUserMedia request.</li>
            <li>You've not installed SSL certificate (i.e. testing on non-HTTPS domain)</li>
            <li>"screen capturing" is requested multiple times per tab. Maximum one request is permitted
                per page!</li>
        </ol>
        <br />
        <br />
        <h2>
            Why recursive cascade images or blurred screen?</h2>
        <p>
            Remember, recursive cascade images or blurred screen is chrome's implementation
            issue. It will be solved soon.
        </p>
        <p>
            mandatory: {chromeMediaSource: 'tab'} can only be useful in chrome extensions. See
            <a href="https://www.webrtc-experiment.com/screen-broadcast/" target="_blank">Tab
                sharing using tabCapture APIs.</a></p>
        <br />
        <br />
        <h2>
            What about Desktop Sharing?</h2>
        <p>
            Obviously, it is one of the most requested features; however not supported yet.
            Chrome WebRTC team is planning to support it in near future.</p>
        <p>
            These screen sharing APIs (i.e. <code>{ chromeMediaSource: 'screen' }</code>) allows
            only state-less (non-interactive) screen sharing.</p>
        <br />
        <br />
        <section style="border: 1px solid rgb(189, 189, 189); border-radius: .2em; margin: 1em 3em;">
            <h2 id="feedback" style="border-bottom: 1px solid rgb(189, 189, 189); padding: .2em .4em;">Feedback</h2>

            <div>
                <textarea id="message" style="border: 1px solid rgb(189, 189, 189); height: 8em; margin: .2em; outline: none; resize: vertical; width: 98%;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
            </div>
            <button id="send-message" style="font-size: 1em;">Send Message</button>
        </section>
        <footer>
            <p> <a href="https://www.webrtc-experiment.com/" target="_blank">WebRTC Experiments!</a> © <a href="https://plus.google.com/100325991024054712503" rel="author" target="_blank">Muaz Khan</a>, <span>2013 </span> » <a href="mailto:muazkh@gmail.com" target="_blank">Email</a> » <a href="http://twitter.com/muazkh" target="_blank">@muazkh</a> » <a href="https://github.com/muaz-khan" target="_blank">Github</a></p>
        </footer>
        <!-- common.js is useless for you! -->
        <script src="https://www.webrtc-experiment.com/common.js" async> </script>
    </body>
</html>